<template>
  <div>
    <el-icon
      @click="changeTheme(true)"
      icon-class="size"
      style="padding-top: 1.5em"
      v-if="settingsStore.theme === ThemeEnum.LIGHT"
    >
      <Sunny />
    </el-icon>
    <el-icon
      @click="changeTheme(false)"
      icon-class="size"
      style="padding-top: 1.5em"
      v-if="settingsStore.theme === ThemeEnum.DARK"
    >
      <Moon />
    </el-icon>
  </div>
</template>

<script setup lang="ts">
import { useSettingsStore } from "@/store";
import { ThemeEnum } from "@/enums/ThemeEnum";
import { Moon, Sunny } from "@element-plus/icons-vue";
defineProps({
  size: {
    type: String,
    required: false,
  },
});

const settingsStore = useSettingsStore();
//切换主题
const isDark = ref<boolean>(settingsStore.theme === ThemeEnum.DARK);
const changeTheme = (val: any) => {
  isDark.value = val;
  settingsStore.changeTheme(isDark.value ? ThemeEnum.DARK : ThemeEnum.LIGHT);
};
</script>
